<template>
  <div>
    <div v-for="item in list" :key="item.id" class="flex a-center b-b p-15 p-h-10 relative">
      <router-link :to="`/goods/detail/${item.id}`">
        <img class="item-img max-w-70 b-r-5 fs-rem-12px" :src="item.picture" alt="商品logo" />
      </router-link>
      <router-link :to="`/goods/detail/${item.id}`" class="info flex-1 m-h-10">
        <p class="test text-title fs-rem-14px p-t-3">{{item.gname}}</p>
        <p class="text-grey fs-rem-12px p-t-3">{{item.bname}}</p>
        <!-- <p v-if="!hideDistance" class="text-grey fs-rem-12px">距我 {{parseInt(item.distance)}}km</p> -->
        <div class="fs-rem-14px" :class="{'p-v-5': hideDistance}">
          <p v-if="item.yhtype === 1">
            <span class="text-red fs-rem-15px">{{item.zk / 10}}折</span>
            <span class="text-grey fs-rem-12px p-l-5" v-if="item.fprice">
              <s>¥{{item.fprice}}</s>
            </span>
          </p>
          <p v-else>
            <span class="text-red fs-rem-15px">¥{{item.nprice}}</span>
            <span class="text-grey fs-rem-12px p-l-5" v-if="item.fprice">
              <s>¥{{item.fprice}}</s>
            </span>
          </p>
        </div>
      </router-link>
      <!-- 用户操作 -->
      <div class="text-center">
        <van-button
          size="small"
          class="bg-yellow b-none text-white"
          :disabled="item.status === 2 || item.hasGetDiscounts"
          @click="handleGetDiscounts(item)"
        >
          <span v-if="item.hasGetDiscounts">已领取</span>
          <span v-else>{{item.status === 1 ? '领折扣券' : '已下架'}}</span>
        </van-button>
        <p v-if="!item.hasGetDiscounts" class="fs-rem-12px text-grey p-t-5">剩余: {{item.yl}}{{item.unit}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      require: true,
      type: Array
    },
    hideDistance: {
      default: false,
      type: Boolean
    }
  },
  methods: {
    async handleGetDiscounts (item) {
      let { message, status } = await this.$api.post('/xf/user/add', {
        gid: item.id
      })
      // 3 没有当前用户
      // 0 成功
      // 4 没有这个商品
      // 5 这个商品已下架
      // 6 会员当天在当前商家已经进行过两次消费
      // 7 该商品库存不足
      if (status === 401) return
      if (status === 0) {
        this.$toast.success(message)
        this.$emit('changeGoodsStatus', { id: item.id })
      } else {
        this.$toast.fail(message)
      }
    }
  }
}
</script>
